<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ykf">
    <script src="js/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        
    </style>
</head>
<body>
      <div class="lunbotu">
            <!--轮播图-->
            <div class="lunbotu-content">
            <!--图片部分-->
            <ul class="lunbotu-pic">
                <!--(li>a[href=#]>img[src=img/$$.jpg])*5-->
                <li class="current"><a href="#"><img src="img/轮播图/轮播图01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/轮播图/轮播图02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/轮播图/轮播图03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/轮播图/轮播图04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/轮播图/轮播图05.jpg" alt=""></a></li>          
            </ul>
            <ul class="lunbotu-indicator">
                <!--指示灯-->
                <li class="aaa"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="lunbotu-page1">
                <!--箭头-->
                <span class="prev"><img src="img/left.png" alt=""></span>
                <!--<span class="next"><img src="img/right.png" alt=""></span>-->
            </div>
            <div class="lunbotu-page2">
                <!--箭头-->
                <!--<span class="prev"><img src="img/left.png" alt=""></span>-->
                <span class="next"><img src="img/right.png" alt=""></span>
            </div>
        </div>
</body>
</html>
<script>
    // 轮播图
var index = 0;

var timer = setInterval(nextImg,1000);
function nextImg(){
    // console.log(index);
         index = (index ==$('.lunbotu .lunbotu-content .lunbotu-pic li').length-1) ? 0 : index+1;
         showImg();
    }
    // 下一张
    function prevImg(){
         index = (index ==$('.lunbotu .lunbotu-content .lunbotu-pic li').length-1) ? 0 : index-1;
         showImg();
    }

function showImg(){
    // console.log(index);
    $('.lunbotu-content .lunbotu-pic li').eq(index).show().siblings().hide();
    $('.lunbotu-content .lunbotu-indicator li').eq(index).addClass('aaa')
                        .siblings().removeClass();
}
// 3.点击按钮切换
    $('.lunbotu .lunbotu-content').hover(function(){
        clearInterval(timer);

    },function(){
        timer = setInterval(nextImg,1000);
    });
     // 上一张
        $('.lunbotu .lunbotu-content .lunbotu-page1 .prev').click(function(){
            prevImg();
            // showImg();
        });
        // 下一张
        $('.lunbotu-content .lunbotu-page2 .next').click(function(){
            nextImg();
        });
</script>